<template>
  <view class="category">
    <!--搜索框-->
    <view class="search" @click="goSearch">
      <view class="input">
        <image src="/static/images/search-icon.png"></image>
        <text>需要搜索请点击</text>
      </view>
    </view>
    <view class="categoryContainer">
      <view class="scrollMenu">
        <scroll-menu :height="height" :scroll-y="true" :cate-list="cateList"></scroll-menu>
      </view>
      <view class="scrollBrand">
        <scroll-brand :height="height" :scroll-y="true" :cate-list="cateList"></scroll-brand>
      </view>
    </view>
  </view>
</template>

<script>
import {mapState} from "vuex";
import Input from "@/component/Input/Input.vue";
import scrollMenu from "@/pages/category/components/scrollMenu/scrollMenu.vue";
import scrollBrand from "@/pages/category/components/scrollBrand/scrollBrand.vue";
import setTabBarBadge from "@/mixin/setTabBarBadge";

export default {
  mixins: [setTabBarBadge],
  data() {
    return {
      /* 可视区域的高度 */
      height: "",
    };
  },
  methods: {
    /* 获取设备信息的回调函数 */
    getSystemInfo() {
      uni.getSystemInfo({
        success: (result) => {
          this.height = result.windowHeight + "px"
        }
      })
    },
    /* 获取分类列表的回调函数 */
    async fetchCateList() {
      try {
        await this.$store.dispatch("categoryStore/fetchCateList")
      } catch (error) {
        uni.showToast({title: "获取分类列表失败", icon: "none", duration: 2000})
      }
    },
    goSearch() {
      uni.navigateTo({
        url: "/subPackages/search/search"
      })
    }
  },
  computed: {
    ...mapState("categoryStore", ["cateList"])
  },
  components: {
    Input,
    scrollMenu,
    scrollBrand
  },
  onShow() {
    this.getSystemInfo()
  },
  onLoad() {
    this.fetchCateList()
  },
}
</script>

<style scoped lang="scss">
.category {
  width: 100%;

  .search {
    box-sizing: border-box;
    width: 100%;
    height: 80rpx;
    background-color: #c00000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30rpx 0;


    .input {
      box-sizing: border-box;
      width: 95%;
      height: 60rpx;
      background-color: #ffffff;
      border-radius: 40rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #6b6b6b;
      font-size: 30rpx;

      image {
        width: 40rpx;
        height: 40rpx;
      }
    }
  }

  .categoryContainer {
    display: flex;

    .scrollMenu {
      width: 180rpx;
    }

    .scrollBrand {
      flex: 1;
    }
  }
}
</style>
